<template>
	<view>
		<view class="head">
			<view class="head_left" @tap="back()">
				<image src="../../../static/wode/return.png" mode=""></image>
				<text>返回</text>
			</view>
			<view class="head_mid">
				所有群聊
			</view>
			<view class="head_right">
				<image src="" mode=""></image>
			</view>
		</view>
		<!-- 搜索框 -->
		<view class="search_box">
			<view class="search" @tap="">
				<image src="../../../static/jingjie/search.png" mode=""></image>
				<text>搜索</text>
			</view>
			<image class="addImg" src="../../../static/jingyou/jia.png" mode="" @tap="toAdd"></image>
		</view>
		
		<!-- 搜索框 -->
		<!-- 创建群聊 -->
		<view class="select-tab" v-if="isShow">
			<view class="sanjiaox"></view>
			<view class="hidden-box">
				<view class="small-Box active" @tap="toCreatGroup">
					<image src="../../../static/jingyou/creatgroups.png"></image>
					<view class="menu-title">创建群聊</view>
				</view>
				<view class="small-Box" @tap="tofindGroup()">
					<image src="../../../static/jingyou/search.png"></image>
					<view class="menu-title">查找群聊</view>
				</view>
			</view>
		</view>
		<!-- 创建群聊 -->

		<!-- 群聊列表 -->
		<view class="body">
			<view class="group_item" v-for="(item,index) in grounplist" :key="index" @tap="togroupsay(index)">
				<!-- 群聊头像 -->
				<image class="one_image" :src="item.FaceUrl" mode=""></image>
				<text class="there_text">{{item.Name}}</text>
				<view class="bottomborder"></view>
			</view>
			<!-- <view class="group_item">
				<view class="there_image image_box">
					<image class="there_mid_image" src="../../../static/avatar.jpg" mode=""></image>
					<image src="../../../static/avatar.jpg" mode=""></image>
					<image src="../../../static/avatar.jpg" mode=""></image>
				</view>
				<text class="there_text">三个人的群聊</text>
				<view class="bottomborder">
				</view>
			</view> -->
		</view>
		<!-- 群聊列表 -->
		<mask :isShowMask='isShowMask' @closeMask='closeMask'></mask>
	</view>
</template>

<script>
	import mask from '../../../components/mask.vue'
	import webim from '../../../common/webim_wx.min.js'
	export default {

		components: {
			mask
		},
		data() {
			return {
				isShowMask: false,
				isShow: false,
				loginInfo: {},
				grounplist: {},
				grounpAllUser: [],
			};
		},
		created() {
			this.getMyGroup()
		},
		onShow() {
			this.isShowMask=false;
			this.isShow=false;
		},
		methods: {
			//获取群组列表
			getMyGroup() {
				var _this = this
				// initGetMyGroupTable([]);
				let loginInfo = uni.getStorageSync('loginInfo')
				// 				console.log(loginInfo)
				// 				console.log(loginInfo.identifier)
				var options = {
					'Member_Account': '' + loginInfo.identifier,
					'Limit': 50,
					'Offset': 0,
					// 'GroupType':'',
					'GroupBaseInfoFilter': [
						'Type',
						'Name',
						'Introduction',
						'Notification',
						'FaceUrl',
						'CreateTime',
						'Owner_Account',
						'LastInfoTime',
						'LastMsgTime',
						'NextMsgSeq',
						'MemberNum',
						'MaxMemberNum',
						'ApplyJoinOption',
						'ShutUpAllMember'
					],
					'SelfInfoFilter': [
						'Role',
						'JoinTime',
						'MsgFlag',
						'UnreadMsgNum'
					]
					// 					"MemberInfoFilter": [ // 如果需要成员信息，请添加此数组
					// 						"Account", // 成员 ID
					// 						"Role",
					// 						"JoinTime",
					// 						"MsgSeq",
					// 						"MsgFlag",
					// 						"LastSendMsgTime",
					// 						"ShutUpUntil"
					// 					],
				};
				webim.getJoinedGroupListHigh( //请求群列表
					options,
					function(resp) {
						if (!resp.GroupIdList || resp.GroupIdList.length == 0) {
							uni.showToast({
								title: '您目前还没有加入任何群组',
								icon: 'none'
							})
							return;
						}
						var data = [];
						for (var i = 0; i < resp.GroupIdList.length; i++) {

							resp.GroupIdList[i].index = i;
							var a = resp.GroupIdList[i].index
							// console.log(arr)
							var group_id = resp.GroupIdList[i].GroupId;
							var name = webim.Tool.formatText2Html(resp.GroupIdList[i].Name);
							var type_en = resp.GroupIdList[i].Type;
							var type = webim.Tool.groupTypeEn2Ch(resp.GroupIdList[i].Type);
							var role_en = resp.GroupIdList[i].SelfInfo.Role;
							var role = webim.Tool.groupRoleEn2Ch(resp.GroupIdList[i].SelfInfo.Role);
							var msg_flag = webim.Tool.groupMsgFlagEn2Ch(
								resp.GroupIdList[i].SelfInfo.MsgFlag);
							var msg_flag_en = resp.GroupIdList[i].SelfInfo.MsgFlag;
							var join_time = webim.Tool.formatTimeStamp(
								resp.GroupIdList[i].SelfInfo.JoinTime);
							var member_num = resp.GroupIdList[i].MemberNum;
							var notification = webim.Tool.formatText2Html(
								resp.GroupIdList[i].Notification);
							var introduction = webim.Tool.formatText2Html(
								resp.GroupIdList[i].Introduction);
							var ShutUpAllMember = resp.GroupIdList[i].ShutUpAllMember;
							data.push({
								'GroupId': group_id,
								'Name': name,
								'TypeEn': type_en,
								'Type': type,
								'RoleEn': role_en,
								'Role': role,
								'MsgFlagEn': msg_flag_en,
								'MsgFlag': msg_flag,
								'MemberNum': member_num,
								'Notification': notification,
								'Introduction': introduction,
								'JoinTime': join_time,
								'ShutUpAllMember': ShutUpAllMember
							});
							var options_Gr = {
								'GroupIdList': [
									resp.GroupIdList[i].GroupId
								],
								'GroupBaseInfoFilter': [
									'Type',
									'Name',
									'Introduction',
									'Notification',
									'FaceUrl',
									'CreateTime',
									'Owner_Account',
									'LastInfoTime',
									'LastMsgTime',
									'NextMsgSeq',
									'MemberNum',
									'MaxMemberNum',
									'ApplyJoinOption'
								],
								'MemberInfoFilter': [
									'Account',
									'Role',
									'JoinTime',
									'LastSendMsgTime',
									'ShutUpUntil'
								]
							}
							var getGroup = []
							// _this.grounpAllUser[index] = 'userID'
							webim.getGroupInfo(
								options_Gr,
								function(resp) {
									console.log(a)
									// 											getGroup.push({
									// 												'GroupId' : resp.GroupInfo[0].MemberList
									// 											})

									// 											for(var j in resp.GroupInfo[0].MemberList){
									// 												_this.grounpAllUser.push({
									// 													'userId' : resp.GroupInfo[0].MemberList[j].Member_Account
									// 												})
									// 											}
									// console.log(resp.GroupInfo[0].MemberList[j])
									// _this.grounpAllUser[index]
									// var userID = ''
									// var a  = resp.GroupInfo[0].MemberList[i]
									// 											for (var j in _this.grounpAllUser){
									// 												console.log(_this.grounpAllUser[j])
									// 											}
									// console.log(_this.grounpAllUser)
									// 											for(var j in ){
									// 												// resp.GroupInfo[0].MemberList[i].
									// // 												_this.grounpAllUser.push({
									// // 													'userID' : resp.GroupInfo[0].MemberList[i].Member_Account[j]
									// // 												})
									// 													// resp.GroupInfo[0].MemberList[i].
									// 												// _this.grounpAllUser
									// 											}

									// console.log(JSON.stringify(resp.GroupInfo[0].MemberList) + '群基本资料')
									// 											for(var j = 0 ; j < _this.grounpAllUser.length ; j++){
									// 												// console.log(GroupInfo[0].MemberList[j])
									// 												_this.grounpUser.push({
									// 												  'userID' : resp.GroupInfo[0].MemberList[j].Member_Account
									// 												})
									// 										
									// 											}

								}
							)

							// console.log(_this.grounpUser)

						}
						// console.log(resp)

						// console.log(_this.grounpAllUser)
						_this.grounplist = resp.GroupIdList
						console.log(_this.grounplist, '群组列表')
						// console.log(_this.grounplist[0].Name)
					},
					function(err) {
						console.log(err.ErrorInfo);
					}
				);
			},
			toAdd() {
				this.isShow = true
				this.isShowMask = true
			},
			closeMask() {
				this.isShow = false
				this.isShowMask = false
			},
			toCreatGroup() { //创建群聊
				uni.navigateTo({
					url: "/pages/Friend/creatGroup/creatGroup"
				})
			},
			togroupsay(index) { //去群组聊天界面
				var a = this.grounplist[index].GroupId
				var b = this.grounplist[index].Name
				console.log(a, b)
				uni.navigateTo({
					url: '/pages/Friend/chat/chat?item='+ a +'&groupname='+ b +'&chatType = GROUP'
				})
			},
			tofindGroup() { //查找群聊
				uni.navigateTo({
					url: "/pages/Friend/findGroup/findGroup"
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		},
	}
</script>

<style scoped>
	.head {
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 162upx;
		background: #ffffff;
		z-index: 200;
		position: fixed;
		left: 0;
		top: 0;
		box-sizing: border-box;
	}

	.head_left image {
		width: 20upx;
		height: 36upx;
		margin-right: 9upx;
	}

	.head_left {
		height: 82upx;
		width: 106upx;
		display: flex;
		align-items: center;
		line-height: 82upx;
		color: #666666;
		font-size: 32upx;
		padding-left: 24upx;
		padding-top: 70upx;
	}
	.head_mid{
		padding-top: 90upx;
	}

	.head_right image {
		height: 36upx;
		width: 36upx;
		padding-right: 24upx;
		/* padding-top: 62upx; */
	}

	.head_right {
		margin-left: 68upx;
	}

	.body {
		margin-top: 250upx;
	}

	.group_item {
		background: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 34upx 24upx;
		position: relative;
	}

	.group_item image {
		width: 46upx;
		height: 46upx;
		border-radius: 50%;
		overflow: hidden;
	}

	.group_item text {
		color: #333333;
		font-size: 32upx;
	}

	.image_box {
		width: 92upx;
		height: 92upx;
		display: flex;
		flex-wrap: wrap;
		position: relative;
		margin-right: 44upx;
	}
	.group_item .one_image{
		width:86upx ;
		height: 86upx;
		overflow: hidden;
		border-radius: 50%;
		margin-right: 36upx;
	}

	.there_mid_image {
		position: absolute;
		left: 23upx;
		top: 49upx;
	}

	.five_mid_image {
		position: absolute;
		left: 23upx;
		top: 26upx;
	}

	.bottomborder {
		position: absolute;
		width: 600upx;
		border-bottom: 1upx solid #E6E6E6;
		bottom: 1upx;
		right: 0;
	}

	.there_image {
		padding-top: 23upx;
	}

	.select-tab {
		width: 241upx;
		height: 242upx;
		border-radius: 10upx;
		position: fixed;
		right: 24upx;
		top: 250upx;
		z-index: 10000;
	}

	.sanjiaox {
		border-style: solid;
		border-width: 15upx 15upx 15upx 15upx;
		border-color: transparent transparent white transparent;
		width: 0upx;
		height: 0upx;
		position: absolute;
		right: 10upx;
		top: -27upx;
	}

	.hidden-box {
		width: 100%;
		height: 160upx;
		border-radius: 10upx;
		background-color: white;
	}

	.small-Box {
		height: 80upx;
		display: flex;
		padding: 29upx 37upx;
		box-sizing: border-box;
		align-items: center;

	}

	.small-Box.active {
		border-bottom: 1upx solid rgba(230, 230, 230, 1);
	}

	.menu-title {
		font-size: 28upx;
		color: rgba(51, 51, 51, 1);
		margin-left: 20upx;
	}

	.small-Box image {
		width: 30upx;
		height: 30upx;
	}

	.small-Box .img1 {
		width: 28upx;
		height: 28upx;
	}
	
	/* 搜索框 */
	.search_box{
		padding: 12upx 24upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #F5F5F5;
		width: 100%;
		position: fixed;
		top:163upx;
		box-sizing: border-box;
		z-index:100 ;
	}
	
	.search {
		background: #FFFFFF;
		border-radius: 64upx;
		width: 90%;
		height: 64upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		color: #999999;
	
	}
	
	.search image {
		height: 28upx;
		width: 28upx;
		margin-right: 10upx;
	}
	.addImg {
		width: 36upx;
		height: 36upx;
	}
</style>
